<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>实现逐个隐藏和显示的动画案例</title>
    <style>
        img {
            vertical-align: top;
        }
    </style>
</head>

<body>
    <input type="button" id="btn1" value="隐藏动画" />
    <input type="button" id="btn2" value="显示动画" />
    <div id="imgs">
        <img src="../img/12.jpg" />
        <img src="../img/13.jpg" />
        <img src="../img/14.jpg" />
    </div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(function () {
        $('#btn1').click(function () {
            $('img').last().slideUp(500, function () {
                $(this).prev().slideUp(500, arguments.callee)
            })
        })
        $('#btn2').click(function () {
            $('img').first().slideDown(500, function () {
                $(this).next().slideDown(500, arguments.callee)
            })
        })
    })
</script>

</html>